<template>
<div class="page-VisualTempEdit">
    <!-- temp-page-mod-look:预览模式 -->
    <!-- temp-page-mod-edit:编辑模式 -->
    <!-- 操作按钮 -->
    <div class="temp-opera-btn-line">
        <div class="opera-line opera-line-l">
            
        </div>
        <div class="opera-line opera-line-c"></div>
        <div class="opera-line opera-line-r">
            <div v-if="!previewDialogFlag">
                <el-button class='gia-btn-has-bd-color temp-btn-item' @click='saveTheTemp'>保存</el-button>
                <el-button class='gia-btn-has-bd-color temp-btn-item' @click='goBack'>返回</el-button>
                <Button class='gia-btn-blue temp-btn-item' @click='showPreviewDialog'>预览</el-button>
            </div>
            <div v-else>
                <el-button class='gia-btn-has-bd-color temp-btn-item' @click='showPreviewDialog'>退出预览</el-button>
                <el-button type='primary' class='gia-btn-has-bd-color temp-btn-item' @click='exportTheTempToImg'>导出</el-button>
                <el-button type='primary' class='gia-btn-blue temp-btn-item' @click='sendTheTempToImg'>发布</el-button>
            </div>
            
            
        </div>
    </div>
    <!-- <div class="temp-opera-btn-line">
        <Button type='primary' class='temp-btn-item' @click='showPreviewDialog'>预览</Button>
        <Button type='primary' class='temp-btn-item' @click='saveTheTemp'>保存</Button>
        <Button type='primary' class='temp-btn-item' @click='releTheTemp'>发布</Button>
    </div> -->

    <!-- 容器-编辑 -->
    <CommonTempPage 
        :editContFlag='!previewDialogFlag'
        :prevTempFlag='previewDialogFlag'
        :templateId='templateId' 
        :briefingDetailId='briefingDetailId' 
        :briefingDetailName='briefingDetailName'
        @saveTheTemp='saveTheTemp' 
        @sendTheTempToImg='sendTheTempToImg' 
        @exportTheTempToImg='exportTheTempToImg'
        ref='CommonTempPage-edit-cont'></CommonTempPage>
</div>
</template>
<script>
import CommonTempPage from '/@/views/visualEditTemp/tempPages/CommonTemp.vue'

export default {
    name: 'VisualTempEditCont',
    mounted() {
        //let briefingDetailId = C.Utils.data(C.Constant.DK.BRIEFING_DETAIL_ID);
        //let briefingDetailName = C.Utils.data(C.Constant.DK.BRIEFING_DETAIL_NAME);
        //console.log('briefingDetailId:' + briefingDetailId);
        this.briefingDetailId = '11';//briefingDetailId;
        this.briefingDetailName = '22';//briefingDetailName;
        //C.Utils.data(C.Constant.DK.CIO_BRIEFING_DETAIL_TEMPLATEID, null);
    },
    components: {
        CommonTempPage: CommonTempPage
    },
    data() {
        return {
            // 模板主键
            templateId: '',
            briefingDetailName: '',
            //内容id
            briefingDetailId: '',
            // 预览
            previewDialogFlag: false
        };
    },
    methods: {
        // 提交-全模板
        releTheTemp() {
            this.$refs['CommonTempPage-edit-cont'].releTheTemp();
        },
        // 保存-全模板
        saveTheTemp() {
            this.$refs['CommonTempPage-edit-cont'].saveTheTemp();
        },
        // 导出-全模板
        exportTheTempToImg() {
            this.$refs['CommonTempPage-edit-cont'].exportTheTempToImg();
        },
        // 发布-全模板
        sendTheTempToImg() {
            this.$refs['CommonTempPage-edit-cont'].sendTheTempToImg();
        },
        // 预览-打开
        showPreviewDialog() {
            this.previewDialogFlag = !this.previewDialogFlag;
            //window.open('/#/VisualTempPrev');
        },
        // 预览-关闭
        hidePreviewDialog() {
            this.previewDialog = false;
        },
        // 返回
        goBack () {
            this.$router.go(-1);
        },
    }
};
</script>
<style scoped>
.page-VisualTempEdit{ width: 100vw; height: 100vh; padding-top: 60px; box-sizing: border-box;}
.temp-opera-btn-line22{ width: 100%; z-index: 11; padding: 10px 20px; text-align: right; background-color: #FFF; border-bottom: 1px solid #DDD;}
.temp-opera-btn-line{ display: flex; width: 100%; z-index: 11; padding: 10px 20px; background-color: #FFF; border-bottom: 1px solid #DDD;}
.temp-opera-btn-line .opera-line{ flex: 1; line-height: 32px;}
.temp-opera-btn-line .opera-line.opera-line-l{ text-align: left; }
.temp-opera-btn-line .opera-line.opera-line-c{ text-align: center; font-size: 20px; color: #000;}
.temp-opera-btn-line .opera-line.opera-line-r{ text-align: right; }
.temp-opera-btn-line .temp-btn-item{ margin-left: 10px; }
.temp-opera-btn-line .opera-back{ color: #999; }
</style>
